HW#4 --- last modified February 28 2019 22:28:48..

Solution set.

Due date: Nov 12

Files to be submitted:
  Hw4.zip

Purpose: To learn about XML and AJAX.

Related Course Outcomes:

The main course outcomes covered by this assignment are:

(1) [Write HTML documents containing standard HTML elements including forms, tables, client-side scripts, and server-side scripts.]

(2) [Write schemas, DTDs, and style sheets for XML documents.]

(5) [Develop and deploy web applications that involve components, web services, and databases.]

Specification:

For this homework I would like you to make a photo website. Your web site should look something like:

Photo Rolls By Date   |        Trip to the Dentist                                    |  [Thumb 1] [Thumb 2]
[Oct 16, 2008     ]   |                                                               |
                      |[This shot shows my bicuspids from a particularly good angle]  |
[   ][Upload Roll]    |                                                               |   ....
                      |           ---------------                                     |  
Albums                |           |   {}    {}  |                                     |  
--------------------- |           |             |
Trip to the Dentist   |           |      {}     |
My dog's wedding      |           |             |
...                   |           |  {=#====#=} |
[Add New Album]       |           ---------------

I recommend you continue to use the MVC pattern from previous homeworks for this one, but I will allow some flexibility. All screen elements except the ZIP file upload though should use AJAX to update themselves without requiring a full page refresh. The grader will run your homework by unzipping the file Hw4.zip in the grader's document root and then looking at the corresponding webpage. Make sure all paths and links are relative and not hard-coded completely urls!!

Briefly here is a description of the elements on the page, starting with those in the left column. Beneath Photo Rolls there should be a list of photo rolls ordered by date hat have been uploaded to the site. The list should only display 10 items at a time, initially being populated by the 10 most recent rolls. If the user clicks a downarrow button, AJAX request should be made of the website for an XML document containing up to 10 additional rolls. Further scrolling should cause further requests. Put the DTD of your XML language for this in scroller.dtd in the Hw4.zip file you submit. If you select a roll, the first picture of the roll should be displayed in the center column and a list of thumbnails should appear in the rightmost column. Again, if there are too many thumbnails for a screen, you should have a downarrow that clicking let's you see more -- all of which should be implemented with AJAX. (An uparrow should also be used as needed). You should implement a means of selecting thumbnails to add to photo albums in the left hand column. This could be down using some kind of checkbox scheme or by drag and drop (doing the altter will garner you 1 bonus point). You should also support rearrangement of thumbnails. Information about modifications to albums and also the order of photos should be stored back on the server using AJAX. Back to the left hand column... Selecting a zip file and clicking [Upload Roll] should do a file upload to the server of a roll of film. Your program should unzip the roll of film and store it in a subfolder of Hw4/Photos with the date as the name. If multiple rolls are uploaded on the same day add a hyphen followed by a number to indicate this. At this time your program should generate any thumbnails. To keep things simple let's assume all photos are jpg's. You may want to edit the php.ini file to adjust the maximum file upload size. Beneath the file upload there is a section that lists Photo Albums. Here users can view existing albums and add new albums. When one clicks [Add New Album], it should ask you for a name. This should be sent to the server where it can be stored in either a flat file or a database (your choice). Initially, albums are empty, but as mentioned above you can add photos from rolls into albums. You should also have some mechanism for rearranging the order of albums. The center column of the page is used for a large view of an image. The title should either be the photo roll name or the name of an album. Beneath this there should be a textfield which contains a caption for the photo if such a caption has been entered. Clicking in this textfield, typing in it, and clicking out should store on the server using AJAX a caption for this photo. This completes the description of each of the components of the web-page.

Point Breakdown